<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/form.css">
</head>
<body>
    
    <form >
        <span class="error">用户名密码错误</span>
        <label >
            用户名：<input  name="username" type="text">
        </label>
        <label >
            密码：<input  name="password"  type="text">
        </label>
        <button>登录</button>
    </form> 
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
        
    <script>
        $('form').on('submit', async e => {
            e.preventDefault()
           
            // 发送ajax请求
            const res = await $.ajax({
                url: 'http://localhost:8080/users/login',
                method: 'POST',
            // // 获取表单信息
            // + jQuery 专门给 form 标签定制的一个方法
            // + 为了你拿到用户在表单内填写的信息
            // + serialize()
            // => $('form').serialize()
            // => 返回值是一个查询字符串
            // => 要求:
            // -> form 标签内, 带有 name 属性的表单元素, 才会提取内容
            // 把name的value拼接，等号左边就是value右边是输入的内容
            // username=&password=&email=&phone=&age=&nickname=
                data: $('form').serialize()
            })

            // 判断res内的内容
            if(res.code === 0) return $('.error').show()
      
            // // 把某些内存存储起来
            // // oa一般存储在sessionstorage内

            window.sessionStorage.setItem('token', res.token)
            window.sessionStorage.setItem('id',res.user_id)

            window.location.href = './index.html'
            
        })
    </script> 
   
      
     
</body>
</html>